// 获取首页数据  
async function func(){
    const res = await axios({
        url:"/dashboard"
    })
    console.log('res:', res)
    const {overview,year,salaryData,groupData,provinceData} = res.data

    for (const key in overview) {
        document.querySelector(`[name=${key}]`).innerHTML = overview[key]

    }

    function yearSalary (year){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#line"));
    //   获取月份
      const months = year.map(i=>i.month)
      const salarys = year.map(i=>i.salary)
      // 指定图表的配置项和数据
      var option = {
        //标题
        title: {
          text: "2021全学科薪资走势年",
        },
        // x轴样式
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: months,
          axisLine: {
            lineStyle: {
              color: "gray",
              type: "dashed",
            },
          },
        },
        //提示框
        tooltip: {},
        // x轴样式
        yAxis: {
          type: "value",
          //分割线
          splitLine: {
            show: true, //显示
            lineStyle: {
              color: ["#d6d6d6"], //颜色
              type: "dashed", //类型
            },
          },
        },
        grid: {
          left: 50,
          right:15,
        },
        //图形的颜色
        color: ["#608cff"],
        series: [
          {
            data: salarys,
            //平滑曲线
            smooth: true,
            type: "line",
            //标记大小
            symbolSize: 15,
            lineStyle: {
              width: 8,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#52a1fa", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    yearSalary(year)

    function classSalary (salaryData){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#salary"));
    //   获取数据
    const data =salaryData.map(i=>(obj={
       value : i.b_count+i.g_count,
       name : i.label
    }))
    console.log('data:', data)

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item'
        },
        title:{
          text:"班级薪资分布",
          left:25,
          top:25
        },
        legend: {
          bottom: '10%',
          left: 'center'
        },
        color:['#fda224','#5097ff','#3fceff','#34d39a'],
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 50,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
      };
      myChart.setOption(option);
    }
    classSalary(salaryData)
    // 班级每组薪资
    function groupSalary (groupData){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#lines"));
    //   获取数据

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: 'category',
          // 轴线
          axisLine: {
            // 样式
            lineStyle: {
              // 虚线
              type: 'dashed',
              // 颜色
              color: '#bebebe'
            }
          },
          data: groupData[1].map(v => v.name)
        },
        // 提示框
        tooltip: {},
        // 颜色
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#65dcb2' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d2f0e7' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#4a9fed' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d6e7f6' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        // y轴
        yAxis: {
          type: 'value',
          // 分割线
          splitLine: {
            // 样式
            lineStyle: {
              // 虚线
              type: 'dashed'
            }
          }
        },
        // 绘图网格
        grid: {
          left: 40,
          right: 40
        },
        series: [
          // 多个图表
          {
            data: groupData[1].map(v => v.hope_salary),
            type: 'bar'
          },
          {
            data: groupData[1].map(v => v.salary),
            type: 'bar'
          }
        ]
      };
      myChart.setOption(option);
      // 高亮
      document.querySelectorAll("#btns button").forEach(item => {
        item.addEventListener("click",function(){
          document.querySelector(".btn-blue").classList.remove("btn-blue")
          this.classList.add("btn-blue")
          // 获取数据
          const index = this.innerHTML.trim()
          console.log('index:', index)

          const data = groupData[index]
          console.log('data:', data)

          option.xAxis.data = data.map(i=>i.name)
          option.series[0].data = data.map(i=>i.hope_salary)
          option.series[1].data = data.map(i=>i.salary)
          myChart.setOption(option)
        })
      });

    }
    groupSalary(groupData)

    // 男女数据
    function gbSalary (salaryData){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#gender"));

      // 指定图表的配置项和数据
      var option = {
        title: [
          {
            text: '男女薪资分布'
          },
          {
            text: '男生',
            left: 'center',
            top: '48%',
            textStyle: {
              fontSize: '15'
            }
          },
          {
            text: '女生',
            left: 'center',
            top: '88%',
            textStyle: {
              fontSize: '15'
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        // 颜色
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        series: [
          {
            name: '男生数据',
            type: 'pie',
            // 内外半径
            radius: ['20%', '30%'],
            // 位置
            center: ['50%', '30%'],
            data: salaryData.map(v=>{
              return{
                name:v.label,
                value:v.b_count,
              }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: '女生数据',
            type: 'pie',
            radius: ['20%', '30%'],
            center: ['50%', '70%'],
            data: salaryData.map(v=>{
              return{
                name:v.label,
                value:v.g_count,
              }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
    gbSalary(salaryData)

      // 指定图表的配置项和数据
  // ------------- 地域分布 -------------
  function initMapChart (provinceData) {
    // 基于dom元素 初始化ECharts
    const myEchart = echarts.init(document.querySelector('#map'))

    // 地域数据
    // 基于服务器的数据 筛选出要的
    // 赋值给对应的项 find includes
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 }
    ]

    // 循环 及查找
    dataList.forEach(i=>{
      const res = provinceData.find(pi=>{
        if(pi.name.includes(i.name)){
          return true
        }else{
          return false
        }
      })
      console.log('res:', res)
      if (res !== undefined) {
        i.value = res.value
      }
    })

    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff'
        }
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0']
        },
        show: true,
        left: 40
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)'
          }
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff'
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList
        }
      ]
    }

    // 基于选项 生成图表
    myEchart.setOption(option)
  }

  initMapChart(provinceData)
}
func()
// 渲染图表数据